import MusicList from "@/components/music-list/music-list";
import { IS_TOPLIST } from "@/assets/js/constant";
import { ALBUM_KEY } from "@/assets/js/constant";
export default function createDetailComponent(name, key, fetch) {
  return {
    name,
    components: { MusicList },
    props: {
      data: Object,
    },
    data() {
      return {
        songs: [],
        loading: true,
        isTopList: IS_TOPLIST,
        isAlBum: ALBUM_KEY,
      };
    },
    methods: {
      getSongList(arr) {
        if (!Array.isArray(arr)) {
          return;
        }
        if (!arr.length) {
          return;
        }
        let result =
          (arr.length &&
            arr.map((item) => {
              return {
                id: item.id,
                name: item.name,
                pic: item.al.picUrl,
                singer: item.ar[0].name,
                url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
                duration: item.dt,
              };
            })) ||
          [];
        return result;
      },
    },
    computed: {
      computedData() {
        let ret = null;
        const data = this.data;
        // if (data) {
        //   ret = data;
        // } else {
        //   const cached = localStorage.getItem(key);
        //   if (
        //     cached &&
        //     (cached.mid || cached.id + "") === this.$route.params.id
        //   ) {
        //     ret = cached;
        //   }
        // }
        ret = data;
        return ret;
      },
      pic() {
        const data = this.computedData;
        console.log(data);
        if (this.isTopList) {
          return data && data.coverImgUrl;
        }
        if (this.isAlBum) {
          return data && data.picUrl;
        }
      },
      title() {
        const data = this.computedData;
        return data && (data.name || data.name);
      },
    },
    async created() {
      const data = this.computedData;
      if (!data) {
        const path = this.$route.matched[0].path;
        this.$router.push({
          path,
        });
        return;
      }
      const { data: singerDetail } = await fetch(this.data.id, 20);
      console.log(singerDetail);
      this.songs = this.getSongList(singerDetail.playlist.tracks);
      this.loading = false;
    },
  };
}
